<template>
  <div       >
  <swiper
      @swiper="onSwiper"
      :width="280"
      :initialSlide="value"
      @slideChange="onSlideChange"
  >
    <swiper-slide class="swiper-slide" v-for="i in 3" :key="i">
      <img  style="width: 100%;height: 100%" src="../../assets/ic_home_card.png">
    </swiper-slide>
  </swiper>
</div>
</template>

<script>
import { ref} from 'vue'
import {Swiper, SwiperSlide} from 'swiper/vue';
// swiper-bundle.min.css 决定了小圆点和左右翻页，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 决定了基础的样式
import "swiper/swiper.less";

export default {
  components: {
    Swiper, SwiperSlide
  },
  setup() {
    const value = ref(2)
    const onSwiper = (swiper) => {
      console.log(swiper.activeIndex);
      value.value = swiper.activeIndex
    }
    const onSlideChange = (swiper) => {
      value.value = swiper.activeIndex
    }
    return {
      value,
      onSwiper,
      onSlideChange
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .swiper-wrapper{
  margin-left: 47.5px;
}
.swiper-slide{
  height: 169px;
}

</style>
